// Student_Paging_ Fuzzy_Search
window.onload = function () {
    // 封装获取元素
    // $ 在jquery 中 表示的是 核心选择器
    // 由 $ 符号 获取需要修改的元素 然后对获取的元素进行操作
    function $Key(getKeys) {
        return document.querySelector(getKeys)
    }
    /* 
        https://www.bingjs.com:8001/Student/GetStudentsConditionPages  查询学生+条件+分页    [GET请求]
        (参数studentName：学生姓名，可以为空，支持模糊查询)
        (参数sex：学生性别，可以为空，M表示男，F表示女)
        (参数pageIndex：页码，默认值是1)
        (参数pageSize：每页数量，默认值是10)
    */
    // 定义变量 接收当前页数
    let pageIndex = 1
    let pageAll = 1

    // 定义变量接收 姓名
    let studentName = ""
    // 定义变量接收 性别
    let sex = ""

    // 封装函数 获取数据
    function getAll() {
        // 每一次切换页面 清除上一次纪录
        $Key("#tbody").innerHTML = ""
        let xhr = new XMLHttpRequest()
        // url 地址获取第二页信息
        // 分页查询需要在url 上 添加变量 ==> url 后面添加？，在？后面添加变量 属性 =  属性值
        // 如果需要写多个变量中间使用 & 隔开
        xhr.open("GET", `https://www.bingjs.com:8001/Student/GetStudentsConditionPages?pageIndex=${pageIndex}&studentName=${studentName}&sex=${sex}`)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let stu_infor = JSON.parse(xhr.response)
                // console.log(stu_infor);
                // 通过解构获取当前页数和总页数
                // count 信息总数
                // data 当前页面信息
                let { count, data } = stu_infor
                // 计算总页数
                // Math.ceil() 向上取整
                pageAll = Math.ceil(count / 10)
                // 显示当前页数和总页数
                $Key("#pageIndex").innerHTML = pageIndex
                $Key("#pageAll").innerHTML = pageAll

                data.forEach(a => {
                    let tr = document.createElement("tr")
                    let td1 = document.createElement("td")
                    td1.innerHTML = a.StudentNo
                    let td2 = document.createElement("td")
                    td2.innerHTML = a.StudentName
                    let td3 = document.createElement("td")
                    td3.innerHTML = a.Sex === "M" ? "男" : "女"
                    let td4 = document.createElement("td")
                    td4.innerHTML = bornDate(new Date(a.BornDate))
                    let td5 = document.createElement("td")
                    let btn1 = document.createElement("button")
                    btn1.innerHTML = "修改"
                    let btn2 = document.createElement("button")
                    btn2.innerHTML = "删除"

                    // 删除数据 绑定按钮
                    /* 
                        https://www.bingjs.com:8001/Student/Delete  删除学生    [POST请求]
                        参数：
                        (
                            studentNo 学号
                        )
                    */
                    btn2.onclick = function () {
                        if (!confirm(`你确定要删除${a.StudentNo}${a.StudentName}嘛`)) {
                            return
                        }
                        // 通过Ajax 获取数据 并删除
                        let xhr = new XMLHttpRequest()
                        xhr.open("POST", " https://www.bingjs.com:8001/Student/Delete")
                        // 删除数据 studentNo
                        // ajax 请求报 415 ，请求参数类型与后台接收参数未对应
                        // 解决方式：添加contentType，同时将data参数转为json字符串即可
                        // xhr.setRequestHeader ("content-type", "application/x-www-form-urlencoded" )
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                        xhr.send("studentNo=" + a.StudentNo)
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                let obj = JSON.parse(xhr.response)
                                if (obj) {
                                    alert("删除成功")
                                    getAll()
                                }
                            }
                        }
                    }

                    td5.appendChild(btn1)
                    td5.appendChild(btn2)
                    tr.appendChild(td1)
                    tr.appendChild(td2)
                    tr.appendChild(td3)
                    tr.appendChild(td4)
                    tr.appendChild(td5)
                    $Key("#tbody").appendChild(tr)
                });
            }
        }
    }
    getAll()

    //修改日期格式
    function bornDate(data) {
        let year = data.getFullYear()
        let month = data.getMonth() + 1
        let day = data.getDate()
        // console.log(year,month,day);
        return [year, month, day].map(a => pacth0(a)).join("-")

    }

    // 补0操作 如果是单数就添加一个0
    function pacth0(val) {
        return (val + "").length > 1 ? val : "0" + val
    }

    // 下一页
    $Key("#next").onclick = function () {
        if (pageIndex++ >= pageAll) {
            pageIndex = pageAll
            return
        }
        getAll()
    }
    // 上一页
    $Key("#up").onclick = function () {
        if (pageIndex-- <= 1) {
            pageIndex = 1
            return
        }
        getAll()
    }
    // 首页
    $Key("#one").onclick = function () {
        pageIndex = 1
        getAll()
        return
    }

    // 尾页
    $Key("#end").onclick = function () {
        pageIndex = pageAll
        getAll()
        return
    }

    // 模糊查询 因为上面表单和后端数据已经有了联系
    $Key(".search").onclick = function () {
        pageIndex = 1
        studentName = $Key("#studentName").value
        sex = [...document.getElementsByName("sex")].find(a => a.checked).value
        console.log(sex);
        getAll()
    }
}

